<template>
  <div class="action-wrap">
    <el-button class="first-span"
               type="text"
               @click="handleClick">{{title}}</el-button>
    <el-dialog :visible="visible"
               :before-close="handleCancel"
               :title="title"
               :close-on-click-modal="false"
               width="400px"
               top="20vh"
               append-to-body>
      <el-row>
        <el-col :span="24">
          <div class="remark-box">
            <el-form label-width="0">
              <el-form-item>
                <el-input v-model="reason"
                          type="textarea"
                          show-word-limit
                          :placeholder="placeholder"
                          :maxlength="maxlength"
                          @input="handleInput" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="footer">
            <el-button type="default"
                       @click="handleCancel">取消</el-button>
            <el-button type="primary"
                       :loading="loading"
                       @click="handleSubmit">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
export default {
  name: "WaybillCancelDispatchAction",
  inject: ["$table"],
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    url: {
      type: String,
      default: null
    },
    // 按钮名称
    title: String,
    placeholder: {
      type: String,
      default () {
        return "请输入原因"
      }
    }
  },
  data () {
    return {
      loading: false,
      visible: false,
      reason: null,
      maxlength: 200
    }
  },
  computed: {
    close () {
      return [10, 20, 50, 60];
    },
    financeFlagTips () {
      return {
        1: "运单已加入对账单，不能操作",
        2: "运单已对账，不能操作",
        3: "运单已结账，不能操作"
      }
    },
    financePayTips () {
      return {
        1: "已收",
        2: "已付",
        3: "已收已付"
      }
    }
  },
  methods: {
    handleClick () {
      if (this.record.finance?.prepayFeeFlag) {
        return this.$message({ type: 'warning', message: `运单${this.financePayTips[this.record.finance?.prepayFeeFlag]}预付款，不能操作` });
      } else if (this.record.finance?.arrivePayFeeFlag) {
        return this.$message({ type: 'warning', message: `运单${this.financePayTips[this.record.finance?.arrivePayFeeFlag]}货到付款，不能操作` });
      } else if (this.record.finance?.collectionFeeFlag) {
        return this.$message({ type: 'warning', message: `运单${this.financePayTips[this.record.finance?.collectionFeeFlag]}代收货款，不能操作` });
      }

      if (this.record?.finance?.financeFlag) {
        return this.$message({ type: 'warning', message: this.financeFlagTips[this.record.finance?.financeFlag] });
      }
      if (this.record?.closeTenantId) {
        if (this.record?.toTenantId === this.record.tenantId && this.record?.closeStatus != 40) {
          return this.$message({ type: 'warning', message: `已有待办，请先处理` })
        }
        if (this.record?.closeStatus != 40) {
          return this.$message({ type: 'warning', message: `撤回请求已发送，请勿重复操作` })
        }
      }
      if (this.close.includes(this.record?.closeStatus)) {
        return this.$message({ type: 'warning', message: `运单有关单待办需要处理，暂不能操作` })
      }
      this.visible = true;
    },
    handleInput (val) {
      this.reason = val.trim();
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.submit();
    }, 600),
    async submit () {
      if (!this.reason) {
        return this.$message({ type: 'error', message: this.placeholder })
      }
      this.loading = true;
      const { code, message } = await axios({
        method: "post",
        url: this.url,
        data: {
          waybillId: this.record?.waybillId || this.record.id,
          reason: this.reason,
        },
      });
      this.reason = null;
      this.visible = false;
      if (0 === code) {
        this.loading = false;
        this.$message({ type: "success", message });
        // 刷列表 
        this.$table.search();
      } else if (code === -10341) {
        this.loading = false;
        this.$confirm(`${message}`, "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.goDetail()
        });
      } else {
        this.loading = false;
        this.$message({ type: "error", message: message });
      }
    },
    goDetail () {
      this.$router.push({
        name: this.record?.combineStatus === 10 ? 'oneBill' : 'oneBillDetails',
        query: {
          combineId: this.record.combineId
        }
      });
    },
    handleCancel () {
      this.reason = null;
      this.visible = false;
    }
  }
}
</script>
<style>
.remark-box {
  max-height: 400px;
}
.first-span {
  /* border-left: 1px solid var(--prev-border-color-grey);
  border-right: 1px solid var(--prev-border-color-grey); */
  padding: 0px;
  border-radius: 0px;
}
</style>